<!DOCTYPE html>
<html>
<head>
    <!-- 设置浏览器不缓存 -->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <!-- Content-Type -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- Favicon -->
    <link rel="shortcut icon" href="./images/logo.png">
    <title>企业服务共享中心</title>
    <!--stylesheets-->
    <link rel="stylesheet" href="./plugins/element/index.css">
    <script src="./plugins/vue/vue.js"></script>
    <script src="./plugins/element/index.js"></script>
    <script src="./plugins/axios/axios.min.js"></script>
    <script src="./js/common/public.js?v=0.8.0.3"></script>
    <!-- 自定义样式表 -->
    <link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
</head>
<body>
<div id="app">
    <template>
        <el-container class="maincontainer">
            <el-container class="submaincontainer">
                <el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
                    <div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 10px;padding-right: 20px;">
                        <div slot="header" class="clearfix">
                            <span>组织结构</span>
                            <el-tooltip class="item" effect="dark" content="添加部门或分组" placement="top-start">
                                <el-button type="text" icon="el-icon-plus" v-on:click="adddeptgroup()"
                                           style="margin-left:80px"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除部门或分组" placement="top-start">
                                <el-button type="text" icon="el-icon-delete" v-on:click="removedeptgroup()"></el-button>
                            </el-tooltip>
                        </div>
                        <el-tree v-show="treeshow" :expand-on-click-node="false" :default-expand-all="true"
                                 :data="combinationForm.data" :props="combinationForm.defaultProps"
                                 @node-click="handleNodeClick"></el-tree>
                    </div>
                </el-card>
                <el-card class="box-card" style="width:100%" shadow="never">
                    <div slot="header" class="clearfix">
                        <i v-on:click="showLeftBar()"
                           v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
                           style="color:#409EFF;cursor:pointer;"></i>
                        <span>用户列表</span>
                        <el-button-group style="float: right;margin-top:0px;">
                            <el-tooltip v-for="item in toolbar" class="item" effect="dark" v-bind:content="item.content"
                                        placement="top-start">
                                <el-button size="small" v-bind:icon="item.icon" v-bind:type="item.type"
                                           @click="toolAction(item.content)">{{item.content}}
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </div>
                    <div>
                        <el-table
                                row-key="id"
                                border
                                ref="multipleTable"
                                @select='selectionChange'
                                :data="pagedata"
                                tooltip-effect="dark"
                                :height="tableHeight"
                                style="width: 100%;"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    v-for="column in tablecolums"
                                    v-bind:prop="column.prop"
                                    v-bind:label="column.label"
                                    v-bind:min-width="column.width"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px">
                            <el-pagination
                                    @current-change="handleCurrentPageChange"
                                    :current-page="queryForm.pageNo"
                                    :page-size="queryForm.pagesize"
                                    background
                                    layout="total, prev, pager, next"
                                    :total="pagetotal">
                            </el-pagination>
                        </div>
                    </div>
                </el-card>
            </el-container>
        </el-container>
        <el-dialog :close-on-click-modal="false" title="用户信息" :visible.sync="dialogFormVisible" width="700px">
            <el-form :model="userForm" :rules="userRules" ref="userForm" label-width="80px">
                <el-tabs value="base">
                    <el-tab-pane label="基础信息" name="base">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="username">
                                    <el-input v-model="userForm.username" maxlength="20"
                                              style="width:220px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.sex">
                                    <el-form-item label="性别" prop="sex">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="生日" prop="birthday">
                                    <el-date-picker
                                            v-model="userForm.birthday"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="手机号" prop="phone">
                                    <el-input v-model="userForm.phone" maxlength="20" style="width:220px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <el-form-item label="地址" prop="address">
                                    <el-input v-model="userForm.address" maxlength="100"
                                              style="width:560px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="部门" prop="dept_id">
                                    <el-select v-model="userForm.dept_id">
                                        <el-option
                                                v-for="item in depts"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="职位" prop="positionid">
                                    <el-select v-model="userForm.positionid" placeholder="请选择">
                                        <el-option
                                                v-for="item in positions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>·
                                    </el-select>
                                </el-form-item>
                                <el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.ismanager">
                                    <el-form-item label="部门经理" prop="ismanager">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.isleader">
                                    <el-form-item label="主管" prop="isleader">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="主管姓名" prop="leaderid">
                                    <el-select v-model="userForm.leaderid" filterable>
                                        <el-option-group
                                                v-for="group in users"
                                                :key="group.deptname"
                                                :label="group.deptname">
                                            <el-option
                                                    v-for="item in group.users"
                                                    :key="item.id"
                                                    :label="item.name"
                                                    :value="item.id">
                                            </el-option>
                                        </el-option-group>
                                    </el-select>
                                </el-form-item>
                                <el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="入职日期" prop="employdate">
                                    <el-date-picker
                                            v-model="userForm.employdate"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="离职日期" prop="leavedate">
                                    <el-date-picker
                                            v-model="userForm.leavedate"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.status">
                                    <el-form-item label="状态" prop="status">
                                        <el-radio label="在职">在职</el-radio>
                                        <el-radio label="离职">离职</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.workstatus" :disabled="userForm.status=='离职'">
                                    <el-form-item label="在职状态" prop="workstatus">
                                        <el-radio label="试用期">试用期</el-radio>
                                        <el-radio label="正式录用">正式录用</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.workplace" :disabled="userForm.status=='离职'">
                                    <el-form-item label="工作地点" prop="workplace">
                                        <el-radio label="在家">在家</el-radio>
                                        <el-radio label="在公司">在公司</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                            <el-col :span="12">
                                <el-radio-group v-model="userForm.isactive">
                                    <el-form-item label="激活" prop="isactive">
                                        <el-radio label="是">是</el-radio>
                                        <el-radio label="否">否</el-radio>
                                    </el-form-item>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="userForm.password" type="password" maxlength="20"
                                              style="width:220px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="确认密码" prop="repassword">
                                    <el-input v-model="userForm.repassword" type="password" maxlength="20"
                                              style="width:220px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="身份证信息" name="zhenjian">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-upload
                                        class="avatar-uploader"
                                        ref="upload"
                                        multiple
                                        :limit="2"
                                        :file-list="userForm.idcards"
                                        :action="uploadurl + userForm.username"
                                        :headers="headers"
                                        list-type="picture"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <i class="el-icon-plus">点击上传身份证正反面2张照片</i>
                                </el-upload>
                            </el-col>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="cofirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="imgDialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="过滤条件" :visible.sync="queryFormVisible" width="600px">
            <el-form :model="queryForm" ref="queryForm">

                <el-form-item label="姓名" prop="username" maxlength="20" autocomplete="off">
                    <el-input v-model="queryForm.username"></el-input>
                </el-form-item>

                <el-form-item label="职位" prop="positionid">
                    <el-select v-model="queryForm.positionid" placeholder="请选择">
                        <el-option
                                v-for="item in positions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="性别" prop="sex">
                    <el-radio v-model="queryForm.sex" label="">全部</el-radio>
                    <el-radio v-model="queryForm.sex" label="男">男</el-radio>
                    <el-radio v-model="queryForm.sex" label="女">女</el-radio>
                </el-form-item>

                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="queryForm.phone" maxlength="20" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="queryForm.address" maxlength="100" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="激活" prop="isactive">
                    <el-radio v-model="queryForm.isactive" label="">全部</el-radio>
                    <el-radio v-model="queryForm.isactive" label="是">是</el-radio>
                    <el-radio v-model="queryForm.isactive" label="否">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="queryFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="actionQuery">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="部门/分组" :visible.sync="addDeptFormVisible" width="400px">
            <el-form :inline="true" :model="addDeptForm" ref="addDeptForm" :rules="rules" label-width="80px"
                     class="demo-form-inline">
                <el-form-item label="名称" prop="deptname">
                    <el-col :span="20">
                        <el-input v-model="addDeptForm.deptname"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="类别" prop="type">
                    <el-col :span="20">
                        <el-select v-model="addDeptForm.type" placeholder="类别">
                            <el-option label="部门" value="部门"></el-option>
                            <el-option label="分组" value="分组"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDeptFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="adddeptuser">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
</body>

<script src="./js/user.js?v=0.8.0.3"></script>

</script>
</html>
